<!DOCTYPE html>
<html lang="zh-cn"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js双向绑定的实现原理 - kidney - 博客园</title>
<link type="text/css" rel="stylesheet" href="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/blog-common.css">
<link type="text/css" rel="stylesheet" href="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/276973.css">
<link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/bundle-LessIsMoreRight-mobile.css">
<link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/kidney/rss">
<link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/kidney/rsd.xml">
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/kidney/wlwmanifest.xml">
<script async="" src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/analytics.js"></script><script src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">var currentBlogApp = 'kidney', cb_enable_mathjax=false;var isLogined=true;</script>
<script src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/blog-common.js" type="text/javascript"></script>
</head>
<body>
<a name="top"></a>

<div id="home">
<div id="header">
	<div id="blogTitle">
		
<!--done-->
<div class="title"><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/kidney/">kidney</a></div>
<div class="subtitle"></div>



		
	</div><!--end: blogTitle 博客的标题和副标题 -->
	<div id="navigator">
		
<ul id="navList">
<li id="nav_sitehome"><a id="blog_nav_sitehome" class="menu" href="http://www.cnblogs.com/">博客园</a></li>
<li id="nav_myhome"><a id="blog_nav_myhome" class="menu" href="http://www.cnblogs.com/kidney/">首页</a></li>
<li id="nav_newpost"><a id="blog_nav_newpost" class="menu" rel="nofollow" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li>
<li id="nav_contact"><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/kidney">联系</a></li>
<li id="nav_rss"><a id="blog_nav_rss" class="menu" href="http://www.cnblogs.com/kidney/rss">订阅</a>
<!--<a id="blog_nav_rss_image" class="aHeaderXML" href="http://www.cnblogs.com/kidney/rss"><img src="//www.cnblogs.com/images/xml.gif" alt="订阅" /></a>--></li>
<li id="nav_admin"><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li>
</ul>

		<div class="blogStats">
			
			
			
		</div><!--end: blogStats -->
	</div><!--end: navigator 博客导航栏 -->
</div><!--end: header 头部 -->
<div id="main">
	<div id="mainContent">
	<div class="forFlow">
		
<div id="post_detail">
<!--done-->
<div id="topics">
	<div class="post">
		<h1 class="postTitle">
			<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/kidney/p/6052935.html">Vue.js双向绑定的实现原理</a>
		</h1>
		<div class="clear"></div>
		<div class="postBody">
			<div id="cnblogs_post_body"><p style="text-align: left" align="center"><span style="font-size: 16px">&nbsp; &nbsp; &nbsp; &nbsp;Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。本文仅探究双向绑定是怎样实现的。先讲涉及的知识点，再用简化得不能再简化的代码实现一个简单的 hello world 示例。</span></p>
<p><span style="font-size: 16px">&nbsp;　　参考文章：<a href="https://segmentfault.com/a/1190000006599500" target="_blank">https://segmentfault.com/a/1190000006599500</a></span></p>
<p><span style="font-size: 18px"><strong>一、访问器属性</strong></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 访问器属性是对象中的一种特殊属性，它不能直接在对象中设置，而必须通过 defineProperty() 方法单独定义。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var obj = { };</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 为obj定义一个名为 hello 的访问器属性</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Object.defineProperty(obj, "hello", {</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; get: function () {return sth},</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; set: function (val) {/* do sth */}</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; obj.hello // 可以像普通属性一样读取访问器属性</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 访问器属性的"值"比较特殊，读取或设置访问器属性的值，实际上是调用其内部特性：get和set函数。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; obj.hello // 读取属性，就是调用get函数并返回get函数的返回值</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; obj.hello = "abc" // 为属性赋值，就是调用set函数，赋值其实是传参</span><span style="font-size: 16px">&nbsp;<img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120155820248-500778578.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
get 和 set 方法内部的 this 都指向 obj，这意味着 get 和 set 
函数可以操作对象内部的值。另外，访问器属性的会"覆盖"同名的普通属性，因为访问器属性会被优先访问，与其同名的普通属性则会被忽略。</span></p>
<p><span style="font-size: 16px">&nbsp;</span></p>
<p><span style="font-size: 18px"><strong>二、极简双向绑定的实现</strong></span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120155856263-1051312268.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
此例实现的效果是：随文本框输入文字的变化，span 中会同步显示相同的文字内容；在js或控制台显式的修改 obj.hello 
的值，视图会相应更新。这样就实现了 model =&gt; view 以及 view =&gt; model 的双向绑定。</span></p>
<p><span style="font-size: 16px">&nbsp;<img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160007029-1444374091.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 以上就是 Vue 实现双向绑定的基本原理。</span></p>
<p><span style="font-size: 16px">&nbsp;</span></p>
<p><span style="font-size: 18px"><strong>三、分解任务</strong></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 上述示例仅仅是为了说明原理。我们最终要实现的是：</span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160023154-705049955.png" alt=""></span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160046920-469941328.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 首先将该任务分成几个子任务：</span></p>
<p><span style="font-size: 16px">　　 1、输入框以及文本节点与 data 中的数据绑定</span></p>
<p><span style="font-size: 16px">　　 2、输入框内容变化时，data 中的数据同步变化。即 view =&gt; model 的变化。</span></p>
<p><span style="font-size: 16px">　　 3、data 中的数据变化时，文本节点的内容同步变化。即 model =&gt; view 的变化。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 要实现任务一，需要对 DOM 进行编译，这里有一个知识点：DocumentFragment。</span></p>
<p><span style="font-size: 16px">&nbsp;</span></p>
<p><span style="font-size: 18px"><strong>四、DocumentFragment</strong></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
DocumentFragment（文档片段）可以看作节点容器，它可以包含多个子节点，当我们将它插入到 DOM 
中时，只有它的子节点会插入目标节点，所以把它看作一组节点的容器。使用 DocumentFragment 处理节点，速度和性能远远优于直接操作 
DOM。Vue 进行编译时，就是将挂载目标的所有子节点劫持（真的是劫持，通过&nbsp;append 方法，DOM 中的节点会被自动删除）到 
DocumentFragment 中，经过一番处理后，再将 DocumentFragment 整体返回插入挂载目标。</span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160124217-527060528.png" alt=""></span></p>
<p>&nbsp;</p>
<p># 勘误：flag.append() 应为 flag.appendChild()。下同。在 Chrome 中用 append() 竟然正常，没报错。</p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160134232-1887803443.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
<p><span style="font-size: 18px"><strong>五、数据初始化绑定</strong></span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160200217-164611845.png" alt=""></span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160233873-127171744.png" alt=""></span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160243545-44236467.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 以上代码实现了任务一，我们可以看到，hello world已经呈现在输入框和文本节点中。</span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160327467-1883154446.png" alt=""></span></p>
<p>&nbsp;</p>
<p><span style="font-size: 18px"><strong>六、响应式的数据绑定</strong></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
再来看任务二的实现思路：当我们在输入框输入数据的时候，首先触发 input 事件（或者 keyup、change 
事件），在相应的事件处理程序中，我们获取输入框的 value 并赋值给 vm 实例的 text 属性。我们会利用 defineProperty 将
 data 中的 text 设置为 vm 的访问器属性，因此给 vm.text 赋值，就会触发 set 方法。在 set 
方法中主要做两件事，第一是更新属性的值，第二留到任务三再说。</span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160409513-886321336.png" alt=""></span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160441326-1073521186.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 任务二也就完成了，text 属性值会与输入框的内容同步变化：</span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160501763-1127106704.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;</span></p>
<p><span style="font-size: 18px"><strong>七、订阅/发布模式（subscribe&amp;publish）</strong></span></p>
<p><span style="font-size: 16px"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </strong>text 属性变化了，set 方法触发了，但是文本节点的内容没有变化。如何让同样绑定到 text 的文本节点也同步变化呢？这里又有一个知识点：订阅发布模式。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 发布者发出通知 =&gt; 主题对象收到通知并推送给订阅者 =&gt; 订阅者执行相应操作</span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160541513-1856723431.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 之前提到的，当 set 方法触发后做的第二件事就是作为发布者发出通知：“我是属性 text，我变了”。文本节点则是作为订阅者，在收到消息后执行相应的更新操作。</span></p>
<p><span style="font-size: 16px">&nbsp;</span></p>
<p><span style="font-size: 18px"><strong>八、双向绑定的实现</strong></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 回顾一下，每当 new 一个 Vue，主要做了两件事：第一个是监听数据：observe(data)，第二个是编译 HTML：nodeToFragement(id)。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在监听数据的过程中，会为 data 中的每一个属性生成一个主题对象 dep。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在编译 HTML 的过程中，会为每个与数据绑定相关的节点生成一个订阅者 watcher，watcher 会将自己添加到相应属性的 dep 中。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 我们已经实现：修改输入框内容 =&gt; 在事件回调函数中修改属性值 =&gt; 触发属性的 set 方法。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 接下来我们要实现的是：发出通知 dep.notify() =&gt; 触发订阅者的 update 方法 =&gt; 更新视图。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 这里的关键逻辑是：如何将 watcher 添加到关联属性的 dep 中。</span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160644154-1888733590.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp; &nbsp; &nbsp; &nbsp;在编译 HTML 过程中，为每个与 data 关联的节点生成一个 Watcher。Watcher 函数中发生了什么呢？</span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160659310-1972832043.png" alt=""></span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 首先，将自己赋给了一个全局变量 Dep.target；</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
其次，执行了 update 方法，进而执行了 get 方法，get 的方法读取了 vm 的访问器属性，从而触发了访问器属性的 get 
方法，get 方法中将该 watcher 添加到了对应访问器属性的 dep 中；</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 再次，获取属性的值，然后更新视图。</span></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 最后，将 Dep.target 设为空。因为它是全局变量，也是 watcher 与 dep 关联的唯一桥梁，任何时刻都必须保证 Dep.target 只有一个值。</span></p>
<p><span style="font-size: 16px"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160749388-947918217.png" alt=""></span></p>
<p><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/925891-20161120160814420-1825354650.png" alt=""></p>
<p><span style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 至此，hello world 双向绑定就基本实现了。文本内容会随输入框内容同步变化，在控制器中修改 vm.text 的值，会同步反映到文本内容中。</span></p>
<p><span style="font-size: 16px">&nbsp;　 &nbsp;完整代码：</span><a href="https://github.com/bison1994/two-way-data-binding" target="_blank"><span style="font-size: 16px">https://github.com/bison1994/two-way-data-binding</span></a></p>
<p><span style="font-size: 16px">&nbsp; &nbsp; &nbsp; &nbsp;更详尽的源码分析，可以参考滴滴的这篇文章：<a href="https://github.com/DDFE/DDFE-blog/issues/7" target="_blank">https://github.com/DDFE/DDFE-blog/issues/7</a></span></p></div><div id="MySignature"></div>
<div class="clear"></div>
<div id="blog_post_info_block">
<div id="BlogPostCategory">分类: <a href="http://www.cnblogs.com/kidney/category/813009.html" target="_blank">JavaScript</a></div>
<div id="EntryTag"></div>
<div id="blog_post_info"><div id="green_channel">
        <a href="javascript:void(0);" id="green_channel_digg" onclick="DiggIt(6052935,cb_blogId,1);green_channel_success(this,'谢谢推荐！');">好文要顶</a>
            <a id="green_channel_follow" onclick="follow('57e08720-0af7-e511-9fc1-ac853d9f53cc');" href="javascript:void(0);">关注我</a>
    <a id="green_channel_favorite" onclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏该文</a>
    <a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" onclick="ShareToTsina()"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/icon_weibo_24.png" alt=""></a>
    <a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" onclick="shareOnWechat()"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/wechat.png" alt=""></a>
</div>
<div id="author_profile">
    <div id="author_profile_info" class="author_profile_info">
            <a href="http://home.cnblogs.com/u/kidney/" target="_blank"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/20160712173535.png" class="author_avatar" alt=""></a>
        <div id="author_profile_detail" class="author_profile_info">
            <a href="http://home.cnblogs.com/u/kidney/">kidney</a><br>
            <a href="http://home.cnblogs.com/u/kidney/followees">关注 - 1</a><br>
            <a href="http://home.cnblogs.com/u/kidney/followers">粉丝 - 36</a>
        </div>
    </div>
    <div class="clear"></div>
    <div id="author_profile_honor"></div>
    <div id="author_profile_follow">
                <a href="javascript:void(0);" onclick="follow('57e08720-0af7-e511-9fc1-ac853d9f53cc');return false;">+加关注</a>
    </div>
</div>
<div id="div_digg">
    <div class="diggit" onclick="votePost(6052935,'Digg')">
        <span class="diggnum" id="digg_count">16</span>
    </div>
    <div class="buryit" onclick="votePost(6052935,'Bury')">
        <span class="burynum" id="bury_count">0</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips" style="color: red;">推荐成功</div>
</div>
</div>
<div class="clear"></div>
<div id="post_next_prev"><a href="http://www.cnblogs.com/kidney/p/6079530.html" class="p_n_p_prefix">« </a> 上一篇：<a href="http://www.cnblogs.com/kidney/p/6079530.html" title="发布于2016-11-18 23:07">前端发展史</a><br><a href="http://www.cnblogs.com/kidney/p/6197037.html" class="p_n_p_prefix">» </a> 下一篇：<a href="http://www.cnblogs.com/kidney/p/6197037.html" title="发布于2016-12-19 12:40">CSS方法论完全总结</a><br></div>
</div>


		</div>
		<div class="postDesc">posted @ <span id="post-date">2016-11-20 16:09</span> <a href="http://www.cnblogs.com/kidney/">kidney</a> 阅读(<span id="post_view_count">38559</span>) 评论(<span id="post_comment_count">35</span>)  <a href="https://i.cnblogs.com/EditPosts.aspx?postid=6052935" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(6052935);return false;">收藏</a></div>
	</div>
	<script type="text/javascript">var allowComments=true,cb_blogId=276973,cb_entryId=6052935,cb_blogApp=currentBlogApp,cb_blogUserGuid='57e08720-0af7-e511-9fc1-ac853d9f53cc',cb_entryCreatedDate='2016/11/20 16:09:00';loadViewCount(cb_entryId);var cb_postType=1;</script>
	
</div><!--end: topics 文章、评论容器-->
</div><a name="!comments"></a><div id="blog-comments-placeholder"><div id="comments_pager_top"></div>
<!--done-->
<div class="feedback_area_title">评论列表</div>
<div class="feedbackNoItems"></div>
	

		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3560480,'cml17CWj2ddfUnadM4Vy4cKviFrrp4DZG7GHurnmQGZ8UBMILukkWQ==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3560480,'cml17CWj2ddfUnadM4Vy4cKviFrrp4DZG7GHurnmQGZ8UBMILukkWQ==')">引用</a></span>
				</div>
				<a href="#3560480" class="layer">#1楼</a><a name="3560480" id="comment_anchor_3560480"></a>  <span class="comment_date">2016-11-20 19:08</span> <a id="a_comment_author_3560480" href="http://www.cnblogs.com/ghd258/" target="_blank">高海东</a> <a href="http://msg.cnblogs.com/send/%E9%AB%98%E6%B5%B7%E4%B8%9C" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3560480" class="blog_comment_body">这个和ng那个好</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3560480,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3560480,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3560564,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3560564,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">引用</a></span>
				</div>
				<a href="#3560564" class="layer">#2楼</a><a name="3560564" id="comment_anchor_3560564"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2016-11-20 21:16</span> <a id="a_comment_author_3560564" href="http://www.cnblogs.com/kidney/" target="_blank">kidney</a> <a href="http://msg.cnblogs.com/send/kidney" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3560564" class="blog_comment_body"><a href="#3560480" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3560480);">@</a>
高海东<br>ng没用过。据我了解，目前React最流行，Vue最火，ng有点像IE，有用户存量，也有更新迭代，但是这个世界已经不属于IE了。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3560564,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3560564,'Bury',this)">反对(0)</a></div><span id="comment_3560564_avatar" style="display:none;">http://pic.cnblogs.com/face/925891/20160712173535.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3560785,'iGWcHyt6apJxhd8NcQSBhhgBBFWFEcz+z3ROR+rbQm38UXU6y6JDAw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3560785,'iGWcHyt6apJxhd8NcQSBhhgBBFWFEcz+z3ROR+rbQm38UXU6y6JDAw==')">引用</a></span>
				</div>
				<a href="#3560785" class="layer">#3楼</a><a name="3560785" id="comment_anchor_3560785"></a>  <span class="comment_date">2016-11-21 09:24</span> <a id="a_comment_author_3560785" href="http://www.cnblogs.com/jianxuanbing/" target="_blank">简玄冰</a> <a href="http://msg.cnblogs.com/send/%E7%AE%80%E7%8E%84%E5%86%B0" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3560785" class="blog_comment_body">Vue 是个坑，很多都是基于Node的，想不通过Node弄个 vue-router 结果不行，又不支持templateUrl，HTML必须写在js里面，要么就必须得写元素ID，这个比较坑</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3560785,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3560785,'Bury',this)">反对(8)</a></div><span id="comment_3560785_avatar" style="display:none;">http://pic.cnblogs.com/face/534030/20150516085728.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3560787,'iGWcHyt6apJxhd8NcQSBhhgBBFWFEcz+z3ROR+rbQm38UXU6y6JDAw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3560787,'iGWcHyt6apJxhd8NcQSBhhgBBFWFEcz+z3ROR+rbQm38UXU6y6JDAw==')">引用</a></span>
				</div>
				<a href="#3560787" class="layer">#4楼</a><a name="3560787" id="comment_anchor_3560787"></a>  <span class="comment_date">2016-11-21 09:25</span> <a id="a_comment_author_3560787" href="http://www.cnblogs.com/jianxuanbing/" target="_blank">简玄冰</a> <a href="http://msg.cnblogs.com/send/%E7%AE%80%E7%8E%84%E5%86%B0" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3560787" class="blog_comment_body">而且，看到很多Demo是一个单纯的页面全写完Js和Html</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3560787,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3560787,'Bury',this)">反对(0)</a></div><span id="comment_3560787_avatar" style="display:none;">http://pic.cnblogs.com/face/534030/20150516085728.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3560844,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3560844,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">引用</a></span>
				</div>
				<a href="#3560844" class="layer">#5楼</a><a name="3560844" id="comment_anchor_3560844"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2016-11-21 10:04</span> <a id="a_comment_author_3560844" href="http://www.cnblogs.com/kidney/" target="_blank">kidney</a> <a href="http://msg.cnblogs.com/send/kidney" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3560844" class="blog_comment_body"><a href="#3560785" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3560785);">@</a>
简玄冰<br>不知道你说的和我说的是不是同一个东西。Vue.js可以脱离node单独用，vue-router也是。你说的坑我真没遇到过。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3560844,'Digg',this)">支持(1)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3560844,'Bury',this)">反对(0)</a></div><span id="comment_3560844_avatar" style="display:none;">http://pic.cnblogs.com/face/925891/20160712173535.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3561089,'2tyesyq8NLqqqxYjKxzCgUtgn5Z7UTLsqMgszfD2r2c/bFGtKMHzMg==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3561089,'2tyesyq8NLqqqxYjKxzCgUtgn5Z7UTLsqMgszfD2r2c/bFGtKMHzMg==')">引用</a></span>
				</div>
				<a href="#3561089" class="layer">#6楼</a><a name="3561089" id="comment_anchor_3561089"></a>  <span class="comment_date">2016-11-21 13:41</span> <a id="a_comment_author_3561089" href="http://www.cnblogs.com/YnYMatrix/" target="_blank">cuzfinal</a> <a href="http://msg.cnblogs.com/send/cuzfinal" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3561089" class="blog_comment_body">这是什么字体啊？</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3561089,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3561089,'Bury',this)">反对(0)</a></div><span id="comment_3561089_avatar" style="display:none;">http://pic.cnblogs.com/face/764747/20150602134246.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3561093,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3561093,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">引用</a></span>
				</div>
				<a href="#3561093" class="layer">#7楼</a><a name="3561093" id="comment_anchor_3561093"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2016-11-21 13:43</span> <a id="a_comment_author_3561093" href="http://www.cnblogs.com/kidney/" target="_blank">kidney</a> <a href="http://msg.cnblogs.com/send/kidney" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3561093" class="blog_comment_body"><a href="#3561089" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3561089);">@</a>
cuzfinal<br>文本是华文细黑。代码用 Sublime3 的 Material Theme</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3561093,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3561093,'Bury',this)">反对(0)</a></div><span id="comment_3561093_avatar" style="display:none;">http://pic.cnblogs.com/face/925891/20160712173535.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3561953,'iGWcHyt6apJxhd8NcQSBhhgBBFWFEcz+z3ROR+rbQm38UXU6y6JDAw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3561953,'iGWcHyt6apJxhd8NcQSBhhgBBFWFEcz+z3ROR+rbQm38UXU6y6JDAw==')">引用</a></span>
				</div>
				<a href="#3561953" class="layer">#8楼</a><a name="3561953" id="comment_anchor_3561953"></a>  <span class="comment_date">2016-11-22 10:15</span> <a id="a_comment_author_3561953" href="http://www.cnblogs.com/jianxuanbing/" target="_blank">简玄冰</a> <a href="http://msg.cnblogs.com/send/%E7%AE%80%E7%8E%84%E5%86%B0" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3561953" class="blog_comment_body"><a href="#3560844" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3560844);">@</a>
kidney<br>你试试 分离html js  以组件化的方式调用</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3561953,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3561953,'Bury',this)">反对(0)</a></div><span id="comment_3561953_avatar" style="display:none;">http://pic.cnblogs.com/face/534030/20150516085728.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3580841,'ydhXgPnn4hwLe+xKE8Tz6TLHC4/cXd2JDoOV3y3fUgYqG/29soFe1Q==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3580841,'ydhXgPnn4hwLe+xKE8Tz6TLHC4/cXd2JDoOV3y3fUgYqG/29soFe1Q==')">引用</a></span>
				</div>
				<a href="#3580841" class="layer">#9楼</a><a name="3580841" id="comment_anchor_3580841"></a>  <span class="comment_date">2016-12-14 19:22</span> <a id="a_comment_author_3580841" href="http://home.cnblogs.com/u/503094/" target="_blank">Lfrog</a> <a href="http://msg.cnblogs.com/send/Lfrog" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3580841" class="blog_comment_body">model更新，input无法更新啊</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3580841,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3580841,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3581219,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3581219,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">引用</a></span>
				</div>
				<a href="#3581219" class="layer">#10楼</a><a name="3581219" id="comment_anchor_3581219"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2016-12-15 10:00</span> <a id="a_comment_author_3581219" href="http://www.cnblogs.com/kidney/" target="_blank">kidney</a> <a href="http://msg.cnblogs.com/send/kidney" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3581219" class="blog_comment_body"><a href="#3580841" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3580841);">@</a>
Lfrog<br>对，为了简化代码，把原理说清楚，所以只绑定了文本。实际的技术实现复杂得多，但理解了原理，才能更进一步理解源码。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3581219,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3581219,'Bury',this)">反对(0)</a></div><span id="comment_3581219_avatar" style="display:none;">http://pic.cnblogs.com/face/925891/20160712173535.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3610281,'laYxyJka5qR+Hh5Ex6dd2IXIranXIbOcLPINJ4Ar5zRroRp0kN2pnQ==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3610281,'laYxyJka5qR+Hh5Ex6dd2IXIranXIbOcLPINJ4Ar5zRroRp0kN2pnQ==')">引用</a></span>
				</div>
				<a href="#3610281" class="layer">#11楼</a><a name="3610281" id="comment_anchor_3610281"></a>  <span class="comment_date">2017-01-29 02:09</span> <a id="a_comment_author_3610281" href="http://www.cnblogs.com/cmlingyi/" target="_blank">_ChenMi</a> <a href="http://msg.cnblogs.com/send/_ChenMi" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3610281" class="blog_comment_body">写得很好 浅显易懂又不乏内涵。 待会敲一遍看看有没有什么问题~</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3610281,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3610281,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3621144,'lJvWNd//Y7rS5G9ZUI+Szt/DX1xMWGaEFmqTFWHmToi0ALFMyxgSqw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3621144,'lJvWNd//Y7rS5G9ZUI+Szt/DX1xMWGaEFmqTFWHmToi0ALFMyxgSqw==')">引用</a></span>
				</div>
				<a href="#3621144" class="layer">#12楼</a><a name="3621144" id="comment_anchor_3621144"></a>  <span class="comment_date">2017-02-17 18:06</span> <a id="a_comment_author_3621144" href="http://www.cnblogs.com/ZinCode/" target="_blank">ZinCode</a> <a href="http://msg.cnblogs.com/send/ZinCode" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3621144" class="blog_comment_body">while (child = node.firstChild) {<br>                flag.append(child)<br>            }<br>            return flag<br>while循环这里解释一下？</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3621144,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3621144,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3621784,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3621784,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">引用</a></span>
				</div>
				<a href="#3621784" class="layer">#13楼</a><a name="3621784" id="comment_anchor_3621784"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2017-02-19 14:46</span> <a id="a_comment_author_3621784" href="http://www.cnblogs.com/kidney/" target="_blank">kidney</a> <a href="http://msg.cnblogs.com/send/kidney" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3621784" class="blog_comment_body"><a href="#3621144" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3621144);">@</a>
ZinCode<br>使用documentFragment的append方法，会将作为参数的节点从DOM中取出来，再添加到文档片段中。不是复制，而是“截取”。这段代码的作用就是将目标节点完全截取出来，放入文档片段，待编译加工后，再插回DOM中。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3621784,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3621784,'Bury',this)">反对(0)</a></div><span id="comment_3621784_avatar" style="display:none;">http://pic.cnblogs.com/face/925891/20160712173535.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3622487,'0mrv6vJJyWg0wFwHlv3fZbnFyg+WFqem0q1YS/Zp43zIAOFvluXn4A==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3622487,'0mrv6vJJyWg0wFwHlv3fZbnFyg+WFqem0q1YS/Zp43zIAOFvluXn4A==')">引用</a></span>
				</div>
				<a href="#3622487" class="layer">#14楼</a><a name="3622487" id="comment_anchor_3622487"></a>  <span class="comment_date">2017-02-20 19:19</span> <a id="a_comment_author_3622487" href="http://www.cnblogs.com/wj204/" target="_blank">wj704</a> <a href="http://msg.cnblogs.com/send/wj704" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3622487" class="blog_comment_body"><a href="#3621784" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3621784);">@</a>
ZinCode<br>这里我之前也看不懂，不过看了这个里面说的 http://blog.csdn.net/bofengshuimen700/article/details/27178091 <br>　　<b>你
要了解引用与对象的关系。firstChild是指向元素首个子节点的引用。你给的xx函数中，将firstChild引用指向的对象append到父对
象的末尾，原来firstChild引用的对象就跳到了container对象的末尾，而firstChild就指向了本来是排在第二个的元素对象。如此
循环下去，链接就逐个往后跳了。</b> 懂了些</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3622487,'Digg',this)">支持(1)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3622487,'Bury',this)">反对(0)</a></div><span id="comment_3622487_avatar" style="display:none;">http://pic.cnblogs.com/face/504457/20170515115549.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3624260,'/pGcmqqzpqrY2oH40K5TyX01Z0fagHXx33MO2x+7wbwlH134A7ig/Q==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3624260,'/pGcmqqzpqrY2oH40K5TyX01Z0fagHXx33MO2x+7wbwlH134A7ig/Q==')">引用</a></span>
				</div>
				<a href="#3624260" class="layer">#15楼</a><a name="3624260" id="comment_anchor_3624260"></a>  <span class="comment_date">2017-02-22 17:55</span> <a id="a_comment_author_3624260" href="http://www.cnblogs.com/butcherv/" target="_blank">ButcherV</a> <a href="http://msg.cnblogs.com/send/ButcherV" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3624260" class="blog_comment_body">while (child = node.firstChild) {<br>flag.append(child)<br>}<br><br><a href="http://home.cnblogs.com/u/925891/" target="_blank">@kidney</a>, 请问这里用 = 赋值是什么意思？应该是 == 或 === 么？</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3624260,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3624260,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3624342,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3624342,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">引用</a></span>
				</div>
				<a href="#3624342" class="layer">#16楼</a><a name="3624342" id="comment_anchor_3624342"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2017-02-22 19:25</span> <a id="a_comment_author_3624342" href="http://www.cnblogs.com/kidney/" target="_blank">kidney</a> <a href="http://msg.cnblogs.com/send/kidney" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3624342" class="blog_comment_body"><a href="#3624260" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3624260);">@</a>
ButcherV<br>赋值语句也是有返回值的，这里就是用 =</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3624342,'Digg',this)">支持(2)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3624342,'Bury',this)">反对(0)</a></div><span id="comment_3624342_avatar" style="display:none;">http://pic.cnblogs.com/face/925891/20160712173535.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3624624,'/pGcmqqzpqrY2oH40K5TyX01Z0fagHXx33MO2x+7wbwlH134A7ig/Q==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3624624,'/pGcmqqzpqrY2oH40K5TyX01Z0fagHXx33MO2x+7wbwlH134A7ig/Q==')">引用</a></span>
				</div>
				<a href="#3624624" class="layer">#17楼</a><a name="3624624" id="comment_anchor_3624624"></a>  <span class="comment_date">2017-02-23 10:03</span> <a id="a_comment_author_3624624" href="http://www.cnblogs.com/butcherv/" target="_blank">ButcherV</a> <a href="http://msg.cnblogs.com/send/ButcherV" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3624624" class="blog_comment_body">@kidney 谢谢</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3624624,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3624624,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3625783,'4Hixe1CzYttb+A1EKnvNdIp3zdQLe23GairjPH10kwt+W9hr8l0uRA==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3625783,'4Hixe1CzYttb+A1EKnvNdIp3zdQLe23GairjPH10kwt+W9hr8l0uRA==')">引用</a></span>
				</div>
				<a href="#3625783" class="layer">#18楼</a><a name="3625783" id="comment_anchor_3625783"></a>  <span class="comment_date">2017-02-24 14:27</span> <a id="a_comment_author_3625783" href="http://www.cnblogs.com/xiongdawang/" target="_blank">我正在路上</a> <a href="http://msg.cnblogs.com/send/%E6%88%91%E6%AD%A3%E5%9C%A8%E8%B7%AF%E4%B8%8A" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3625783" class="blog_comment_body"><div class="cnblogs_Highlighter sh-gutter"><div><div id="highlighter_403871" class="syntaxhighlighter  javascript"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="javascript keyword">if</code><code class="javascript plain">(attr[i].nodeName == </code><code class="javascript string">'v-model'</code><code class="javascript plain">) {</code></div><div class="line number2 index1 alt1"><code class="javascript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="javascript keyword">var</code> <code class="javascript plain">name = attr[i].nodeValue; </code><code class="javascript comments">// 获取v-model绑定的属性名</code></div><div class="line number3 index2 alt2"><code class="javascript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="javascript plain">node.addEventListener(</code><code class="javascript string">'input'</code><code class="javascript plain">, </code><code class="javascript keyword">function</code><code class="javascript plain">(e) {</code></div><div class="line number4 index3 alt1"><code class="javascript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="javascript comments">// 给相应的data属性赋值，进而触发该属性的set方法</code></div><div class="line number5 index4 alt2"><code class="javascript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="javascript plain">vm[name]= e.target.value;</code></div><div class="line number6 index5 alt1"><code class="javascript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="javascript plain">});</code></div><div class="line number7 index6 alt2"><code class="javascript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="javascript plain">node.value = vm[name]; </code><code class="javascript comments">// 将data的值赋给该node</code></div><div class="line number8 index7 alt1"><code class="javascript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="javascript plain">node.removeAttribute(</code><code class="javascript string">'v-model'</code><code class="javascript plain">);</code></div><div class="line number9 index8 alt2"><code class="javascript spaces">&nbsp;</code><code class="javascript plain">}</code></div></div></td></tr></tbody></table></div></div></div><br>node.removeAttribute('v-model');请问这里为什么删除v-model属性</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3625783,'Digg',this)">支持(2)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3625783,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3626283,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3626283,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">引用</a></span>
				</div>
				<a href="#3626283" class="layer">#19楼</a><a name="3626283" id="comment_anchor_3626283"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2017-02-25 11:23</span> <a id="a_comment_author_3626283" href="http://www.cnblogs.com/kidney/" target="_blank">kidney</a> <a href="http://msg.cnblogs.com/send/kidney" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3626283" class="blog_comment_body"><a href="#3625783" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3625783);">@</a>
我正在路上<br>洁癖</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3626283,'Digg',this)">支持(1)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3626283,'Bury',this)">反对(0)</a></div><span id="comment_3626283_avatar" style="display:none;">http://pic.cnblogs.com/face/925891/20160712173535.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3630977,'x+jrcwb7P5wKnulg2jO4MZpS8+bZ+8cYV0JuE9DD5YM0GUeloLExQA==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3630977,'x+jrcwb7P5wKnulg2jO4MZpS8+bZ+8cYV0JuE9DD5YM0GUeloLExQA==')">引用</a></span>
				</div>
				<a href="#3630977" class="layer">#20楼</a><a name="3630977" id="comment_anchor_3630977"></a>  <span class="comment_date">2017-03-03 14:45</span> <a id="a_comment_author_3630977" href="http://www.cnblogs.com/Evllis/" target="_blank">玫瑰刺伤指尖Evllis</a> <a href="http://msg.cnblogs.com/send/%E7%8E%AB%E7%91%B0%E5%88%BA%E4%BC%A4%E6%8C%87%E5%B0%96Evllis" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3630977" class="blog_comment_body"><a href="#3626283" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3626283);">@</a>
kidney<br>哈哈,赞一个.<br><br>博主写得都是干货,我喜欢.继续加油.我会持续关注.</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3630977,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3630977,'Bury',this)">反对(0)</a></div><span id="comment_3630977_avatar" style="display:none;">http://pic.cnblogs.com/face/790291/20151012222409.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3650233,'j4GpMW30y6IMpHKmmxKQBgbaJRMQBNe194LVE4+jAkNpKMPgXMYtfQ==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3650233,'j4GpMW30y6IMpHKmmxKQBgbaJRMQBNe194LVE4+jAkNpKMPgXMYtfQ==')">引用</a></span>
				</div>
				<a href="#3650233" class="layer">#21楼</a><a name="3650233" id="comment_anchor_3650233"></a>  <span class="comment_date">2017-03-24 10:55</span> <a id="a_comment_author_3650233" href="http://www.cnblogs.com/duyanming/" target="_blank">杜燕明</a> <a href="http://msg.cnblogs.com/send/%E6%9D%9C%E7%87%95%E6%98%8E" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3650233" class="blog_comment_body">mark</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3650233,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3650233,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3686206,'HsjkZy/plvq0GvVkW3L5jXpgv8hZO9XpNAjTumHz2WPDUzdoxM0beg==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3686206,'HsjkZy/plvq0GvVkW3L5jXpgv8hZO9XpNAjTumHz2WPDUzdoxM0beg==')">引用</a></span>
				</div>
				<a href="#3686206" class="layer">#22楼</a><a name="3686206" id="comment_anchor_3686206"></a>  <span class="comment_date">2017-05-08 00:25</span> <a id="a_comment_author_3686206" href="http://www.cnblogs.com/wmlucky/" target="_blank">明lucky</a> <a href="http://msg.cnblogs.com/send/%E6%98%8Elucky" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3686206" class="blog_comment_body">面试中遇到了这个问题 我怀疑那个面试官看了这篇文章</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3686206,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3686206,'Bury',this)">反对(0)</a></div><span id="comment_3686206_avatar" style="display:none;">http://pic.cnblogs.com/face/1076242/20161206212604.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3704906,'bNi0pO9r5wbANyaVazRfKwQP9qAlF68u+N8KdDr31c6ytf6vFezJrA==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3704906,'bNi0pO9r5wbANyaVazRfKwQP9qAlF68u+N8KdDr31c6ytf6vFezJrA==')">引用</a></span>
				</div>
				<a href="#3704906" class="layer">#23楼</a><a name="3704906" id="comment_anchor_3704906"></a>  <span class="comment_date">2017-06-01 15:40</span> <a id="a_comment_author_3704906" href="http://www.cnblogs.com/sarahshine/" target="_blank">累了吃糖</a> <a href="http://msg.cnblogs.com/send/%E7%B4%AF%E4%BA%86%E5%90%83%E7%B3%96" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3704906" class="blog_comment_body">看到订阅者模式就看不懂了，好晕<br>关键是，我直接照搬代码，还没起作用。。<br><br>不过楼主写得真是很棒，很感谢，让我对 vue 的核心有了一个不错的了解。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3704906,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3704906,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3712635,'x20S/8msfhI+buMp9wxW3BNWlkltqTExbTK3JqPAC/KZaJ0OMi8PFA==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3712635,'x20S/8msfhI+buMp9wxW3BNWlkltqTExbTK3JqPAC/KZaJ0OMi8PFA==')">引用</a></span>
				</div>
				<a href="#3712635" class="layer">#24楼</a><a name="3712635" id="comment_anchor_3712635"></a>  <span class="comment_date">2017-06-12 16:23</span> <a id="a_comment_author_3712635" href="http://www.cnblogs.com/zyl-Tara/" target="_blank">一江西流</a> <a href="http://msg.cnblogs.com/send/%E4%B8%80%E6%B1%9F%E8%A5%BF%E6%B5%81" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3712635" class="blog_comment_body">楼主好棒，对于vue数据双向绑定有了比较清晰的认识！</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3712635,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3712635,'Bury',this)">反对(0)</a></div><span id="comment_3712635_avatar" style="display:none;">http://pic.cnblogs.com/face/939316/20171019164223.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3728853,'tbZJ+0yw6wUqUW3EAavWas73iWSrOrkJhMB5Mpz9X74cEd8vN2He4Q==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3728853,'tbZJ+0yw6wUqUW3EAavWas73iWSrOrkJhMB5Mpz9X74cEd8vN2He4Q==')">引用</a></span>
				</div>
				<a href="#3728853" class="layer">#25楼</a><a name="3728853" id="comment_anchor_3728853"></a>  <span class="comment_date">2017-07-05 12:03</span> <a id="a_comment_author_3728853" href="http://home.cnblogs.com/u/1194212/" target="_blank">yl1215</a> <a href="http://msg.cnblogs.com/send/yl1215" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3728853" class="blog_comment_body">您好，请问<br> var name = attr[i].nodeValue; // 获取v-model绑定的属性名<br>              node.addEventListener('input', function(e) {<br>                // 给相应的data属性赋值，进而触发该属性的set方法<br>                 vm[name]= e.target.value;<br>              });<br>              node.value = vm[name]; // 将data的值赋给该node<br><br>这段代码中的addEventListener函数绑定监听时，要是有多个v-model时，会不会出问题呢，。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3728853,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3728853,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3728858,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3728858,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">引用</a></span>
				</div>
				<a href="#3728858" class="layer">#26楼</a><a name="3728858" id="comment_anchor_3728858"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2017-07-05 12:12</span> <a id="a_comment_author_3728858" href="http://www.cnblogs.com/kidney/" target="_blank">kidney</a> <a href="http://msg.cnblogs.com/send/kidney" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3728858" class="blog_comment_body"><a href="#3728853" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3728853);">@</a>
yl1215<br>有。vue 会报错。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3728858,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3728858,'Bury',this)">反对(0)</a></div><span id="comment_3728858_avatar" style="display:none;">http://pic.cnblogs.com/face/925891/20160712173535.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3728860,'tbZJ+0yw6wUqUW3EAavWas73iWSrOrkJhMB5Mpz9X74cEd8vN2He4Q==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3728860,'tbZJ+0yw6wUqUW3EAavWas73iWSrOrkJhMB5Mpz9X74cEd8vN2He4Q==')">引用</a></span>
				</div>
				<a href="#3728860" class="layer">#27楼</a><a name="3728860" id="comment_anchor_3728860"></a>  <span class="comment_date">2017-07-05 12:17</span> <a id="a_comment_author_3728860" href="http://home.cnblogs.com/u/1194212/" target="_blank">yl1215</a> <a href="http://msg.cnblogs.com/send/yl1215" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3728860" class="blog_comment_body"><a href="#3728858" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3728858);">@</a>
kidney<br>所以不可以有两个不同的v-model吗。。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3728860,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3728860,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3728863,'tbZJ+0yw6wUqUW3EAavWas73iWSrOrkJhMB5Mpz9X74cEd8vN2He4Q==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3728863,'tbZJ+0yw6wUqUW3EAavWas73iWSrOrkJhMB5Mpz9X74cEd8vN2He4Q==')">引用</a></span>
				</div>
				<a href="#3728863" class="layer">#28楼</a><a name="3728863" id="comment_anchor_3728863"></a>  <span class="comment_date">2017-07-05 12:22</span> <a id="a_comment_author_3728863" href="http://home.cnblogs.com/u/1194212/" target="_blank">yl1215</a> <a href="http://msg.cnblogs.com/send/yl1215" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3728863" class="blog_comment_body"><a href="#3728858" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3728858);">@</a>
kidney不好意思啊，我是新手，才会问这么无语的问题。。。。可以有多个v-model，只要处理一下闭包的问题上面的代码就没有问题了是吧。。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3728863,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3728863,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3735989,'0yvObTOtSMBA753/xc/6mc7A6JXN1hbfmTpmzmPSNVKkcSiR/tBjKA==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3735989,'0yvObTOtSMBA753/xc/6mc7A6JXN1hbfmTpmzmPSNVKkcSiR/tBjKA==')">引用</a></span>
				</div>
				<a href="#3735989" class="layer">#29楼</a><a name="3735989" id="comment_anchor_3735989"></a>  <span class="comment_date">2017-07-15 22:33</span> <a id="a_comment_author_3735989" href="http://www.cnblogs.com/sens1992/" target="_blank">SensChen</a> <a href="http://msg.cnblogs.com/send/SensChen" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3735989" class="blog_comment_body">while (child = node.firstChild) {<br>compile(child)<br>flag.append(child)<br>}<br><br>等于先渲染数据 然后再把这个节点加到文档片段里<br>这光取一个节点就得触发两次重布局了，<br><br>你确定vue是这样实现comiler的么。。。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3735989,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3735989,'Bury',this)">反对(0)</a></div><span id="comment_3735989_avatar" style="display:none;">http://pic.cnblogs.com/face/654127/20140726195746.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3744447,'VFro6YE4tn7dNC6R9oI3W62lemxzfg5KRum0ONaGL4cyTsUgZqOOpA==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3744447,'VFro6YE4tn7dNC6R9oI3W62lemxzfg5KRum0ONaGL4cyTsUgZqOOpA==')">引用</a></span>
				</div>
				<a href="#3744447" class="layer">#30楼</a><a name="3744447" id="comment_anchor_3744447"></a>  <span class="comment_date">2017-07-27 10:01</span> <a id="a_comment_author_3744447" href="http://www.cnblogs.com/aimkk/" target="_blank">流畅的心情</a> <a href="http://msg.cnblogs.com/send/%E6%B5%81%E7%95%85%E7%9A%84%E5%BF%83%E6%83%85" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3744447" class="blog_comment_body">写的这么妙，神一样的存在。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3744447,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3744447,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3776678,'MtZ1WYXE+0tddCMa1TcamDtxwFQYO3IKAEChFzPBcT3aP364hz26Gg==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3776678,'MtZ1WYXE+0tddCMa1TcamDtxwFQYO3IKAEChFzPBcT3aP364hz26Gg==')">引用</a></span>
				</div>
				<a href="#3776678" class="layer">#31楼</a><a name="3776678" id="comment_anchor_3776678"></a>  <span class="comment_date">2017-09-06 16:49</span> <a id="a_comment_author_3776678" href="http://www.cnblogs.com/yangrenmu/" target="_blank">yangrenmu</a> <a href="http://msg.cnblogs.com/send/yangrenmu" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3776678" class="blog_comment_body">“输入框内容变化时，data 中的数据同步变化。即 view =&gt; model 的变化。”<br>想问哈楼主，这句话中的model是指什么？先谢谢了，文章写得很好。</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3776678,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3776678,'Bury',this)">反对(0)</a></div><span id="comment_3776678_avatar" style="display:none;">http://pic.cnblogs.com/face/977169/20161222211626.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3776681,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3776681,'f/9nfnDfNs1Z8y48na6Zs2tLU9OO6DnRhn8WyYrM9rCt5eDTE8t5Fw==')">引用</a></span>
				</div>
				<a href="#3776681" class="layer">#32楼</a><a name="3776681" id="comment_anchor_3776681"></a>[<span class="louzhu">楼主</span>]  <span class="comment_date">2017-09-06 16:50</span> <a id="a_comment_author_3776681" href="http://www.cnblogs.com/kidney/" target="_blank">kidney</a> <a href="http://msg.cnblogs.com/send/kidney" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3776681" class="blog_comment_body"><a href="#3776678" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3776678);">@</a>
yangrenmu<br>MVC =&gt; Model, View, Controller</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3776681,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3776681,'Bury',this)">反对(0)</a></div><span id="comment_3776681_avatar" style="display:none;">http://pic.cnblogs.com/face/925891/20160712173535.png</span>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3777415,'j8cFWez+7ohRZHUFJiU37hhUz2xBzIqHSQBndSOjPikW9lvg3WCJoQ==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3777415,'j8cFWez+7ohRZHUFJiU37hhUz2xBzIqHSQBndSOjPikW9lvg3WCJoQ==')">引用</a></span>
				</div>
				<a href="#3777415" class="layer">#33楼</a><a name="3777415" id="comment_anchor_3777415"></a>  <span class="comment_date">2017-09-07 10:40</span> <a id="a_comment_author_3777415" href="http://www.cnblogs.com/wanonder/" target="_blank">wander的九号球</a> <a href="http://msg.cnblogs.com/send/wander%E7%9A%84%E4%B9%9D%E5%8F%B7%E7%90%83" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3777415" class="blog_comment_body">你好 ，有一处想请教一下 <br>在watcher
 里面 设置  一个  Dep.target = this  ,  然后触发get 让 dep.sub这个数组push 进去 
watcher的一个实例，但是之后再设置  Dep.target =null,  这个sub 数组里面的值不是也会被清除了吗？</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3777415,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3777415,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3783158,'WoXROXDCNQh32tVWZbqoVC6ru5wZQ6q22nNH+MQHMH0+rMwGALVEdA==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3783158,'WoXROXDCNQh32tVWZbqoVC6ru5wZQ6q22nNH+MQHMH0+rMwGALVEdA==')">引用</a></span>
				</div>
				<a href="#3783158" class="layer">#34楼</a><a name="3783158" id="comment_anchor_3783158"></a>  <span class="comment_date">2017-09-13 15:16</span> <a id="a_comment_author_3783158" href="http://home.cnblogs.com/u/1207396/" target="_blank">诺顿</a> <a href="http://msg.cnblogs.com/send/%E8%AF%BA%E9%A1%BF" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3783158" class="blog_comment_body"><a href="#3777415" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3777415);">@</a>
wander的九号球<br>Dep.target指向的应该是个对象（Watcher实例），push进去的是那个对象吧，Dep.target = null，那个对象还是存在的。<br>你可以试一下：<br>var a = {b:1}<br>var c = []<br>c.push(a)<br>a={}<br>输出一下c，看看是多少</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3783158,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3783158,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	
		<div class="feedbackItem">
			<div class="feedbackListSubtitle">
				<div class="feedbackManage">
					&nbsp;&nbsp;<span class="comment_actions"><a href="javascript:void(0);" onclick="return ReplyComment(3788320,'+REwah31J0yINc/dPcpgErhlpSxByzSJdbcGvDRq9tusIeoBV0/MVg==')">回复</a><a href="javascript:void(0);" onclick="return QuoteComment(3788320,'+REwah31J0yINc/dPcpgErhlpSxByzSJdbcGvDRq9tusIeoBV0/MVg==')">引用</a></span>
				</div>
				<a href="#3788320" class="layer">#35楼</a><a name="3788320" id="comment_anchor_3788320"></a><span id="comment-maxId" style="display:none;">3788320</span><span id="comment-maxDate" style="display:none;">2017/9/18 15:17:32</span>  <span class="comment_date">2017-09-18 15:17</span> <a id="a_comment_author_3788320" href="http://home.cnblogs.com/u/1233915/" target="_blank">fvij4491</a> <a href="http://msg.cnblogs.com/send/fvij4491" title="发送站内短消息" class="sendMsg2This">&nbsp;</a>
			</div>
			<div class="feedbackCon">
				<div id="comment_body_3788320" class="blog_comment_body">好文章一定要赞一个<br>Vuex 2.0 源码分析:<a href="http://t.cn/Rpd4UHf" target="_blank">http://t.cn/Rpd4UHf</a></div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3788320,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3788320,'Bury',this)">反对(0)</a></div>
			</div>
		</div>
	<div id="comments_pager_bottom"></div></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script>
<div id="comment_form" class="commentform">
<a name="commentform"></a>
<div id="divCommentShow"></div>
<div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div>
<div id="comment_form_container">
<div id="commentform_title">发表评论</div>
<span id="tip_comment" style="color:Red"></span>
<p>
昵称：<input id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="月夜归醉" type="text">
</p>
<div class="commentbox_main">
<div class="commentbox_title">
<div class="commentbox_title_left">评论内容：</div>
<div class="commentbox_title_right">
<img id="ubb_quote" class="comment_icon" src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/quote.gif" alt="引用" title="添加引用" onclick="insertUBB('tbCommentBody','quote')">
<img id="ubb_bold" class="comment_icon" src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/b.png" alt="粗体" title="添加粗体" onclick="insertUBB('tbCommentBody','b')">
<img id="ubb_url" class="comment_icon" src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/lk.png" alt="链接" title="添加链接" onclick="insertUbbUrl('tbCommentBody')">
<img id="ubb_indent" class="comment_icon" src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/indent.png" alt="缩进" title="添加首行缩进" onclick="insertIndent('tbCommentBody')">
<img id="ubb_code" class="comment_icon" src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/InsertCode.gif" alt="代码" title="添加代码" onclick="insertUbbCode()">
<img id="ubb_img" class="comment_icon" src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/img.gif" alt="图片" title="上传图片" onclick="OpenImageUploadWindow();">
</div>
</div>
<div class="clear"></div>
<textarea id="tbCommentBody" class="comment_textarea"></textarea>
</div>
<p id="commentbox_opt">
<input id="btn_comment_submit" class="comment_btn" value="提交评论" type="button">
<span id="span_comment_canceledit" style="display:none"><a href="javascript:void(0);" onclick="return CancelCommentEdit()">不改了</a></span>
<a href="javascript:void(0);" onclick="return logout();">退出</a>
        <a id="commentbox_opt_sub" href="javascript:void(0);" title="订阅后有新评论时会邮件通知您" onclick="commentManager.Subscribe()">订阅评论</a>
</p>
<div id="tip_comment2" style="color:Red"></div>
<p>
[Ctrl+Enter快捷键提交]
</p>
<div style="display:none">
<span id="comment_edit_id"></span><span id="span_parentcomment_id"></span>
<span id="span_parent_id"></span>
<span id="span_comment_replyto"></span>
<span id="span_comment_posted"></span>
</div>
</div>
<div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
<div id="ad_t2"><a href="http://www.ucancode.com/index.htm" target="_blank">【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库</a><br><a href="http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99?affid=cnblogs" target="_blank">【推荐】Vue.js 2.x 快速入门，大量高效实战示例</a><br><a href="https://cloud.tencent.com/act/campus?fromSource=gwzcw.613398.613398.613398" target="_blank">【活动】腾讯云 学生专属优惠套餐 多规格选择</a><br><a href="https://cloud.tencent.com/community/article/303682?fromSource=gwzcw.614532.614532.614532" target="_blank">【活动】释放技术的想象-解码腾讯云软件架构与应用</a><br></div>
<div id="opt_under_post"></div>
<div id="cnblogs_c1" class="c_ad_block"><a href="http://www.gcpowertools.com.cn/products/spreadservices/?utm_source=cnblogs&amp;utm_medium=blogpage&amp;utm_term=bottom&amp;utm_content=Spreadbiaoge&amp;utm_campaign=community" target="_blank"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/24442-20171114102308171-1147697076.png" alt="葡萄城1114" width="300" height="250"></a></div>
<div id="under_post_news"><div class="itnews c_ad_block"><b>最新IT新闻</b>:<br> ·  <a href="http://news.cnblogs.com/n/582870/" target="_blank">继苹果之后，专利流氓Uniloc再次起诉Huawei Watch侵权</a><br> ·  <a href="http://news.cnblogs.com/n/582869/" target="_blank">争议专家宣布头颅移植手术用时18小时成功在人类遗体上实施</a><br> ·  <a href="http://news.cnblogs.com/n/582868/" target="_blank">逼格爆表！苹果宣布新飞船总部对外开放</a><br> ·  <a href="http://news.cnblogs.com/n/582867/" target="_blank">微软补丁又双叒叕惹祸：点阵打印机集体阵亡</a><br> ·  <a href="http://news.cnblogs.com/n/582862/" target="_blank">360手机总裁李开新发内部信：明年业绩要增50%以上</a><br>» <a href="http://news.cnblogs.com/" title="IT新闻" target="_blank">更多新闻...</a></div></div>
<div id="cnblogs_c2" class="c_ad_block"><a href="http://click.aliyun.com/m/34771/" target="_blank"><img src="Vue.js%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%20-%20kidney%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD_files/24442-20171113120112796-634832761.jpg" alt="阿里云1113" width="468" height="60"></a></div>
<div id="under_post_kb"><div class="itnews c_ad_block" id="kb_block"><b>最新知识库文章</b>:<br><div id="kb_recent"> ·  <a href="http://kb.cnblogs.com/page/112506/" target="_blank">大道至简，职场上做人做事做管理</a><br> ·  <a href="http://kb.cnblogs.com/page/563790/" target="_blank">关于编程，你的练习是不是有效的？</a><br> ·  <a href="http://kb.cnblogs.com/page/581467/" target="_blank">改善程序员生活质量的 3+10 习惯</a><br> ·  <a href="http://kb.cnblogs.com/page/568841/" target="_blank">NASA的10条代码编写原则</a><br> ·  <a href="http://kb.cnblogs.com/page/578502/" target="_blank">为什么你参加了那么多培训，却依然表现平平？</a><br></div>» <a href="http://kb.cnblogs.com/" target="_blank">更多知识库文章...</a></div></div>
<div id="HistoryToday" class="c_ad_block"></div>
<script type="text/javascript">
    fixPostBody();
    setTimeout(function () { incrementViewCount(cb_entryId); }, 50);
    deliverAdT2();
    deliverAdC1();
    deliverAdC2();    
    loadNewsAndKb();
    loadBlogSignature();
    LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
    GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);
    loadOptUnderPost();
    GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);   
</script>
</div>


	</div><!--end: forFlow -->
	</div><!--end: mainContent 主体内容容器-->

	<div id="sideBar">
		<div id="sideBarMain">
			
			<div id="calendar"><div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script></div>
			
			<div id="leftcontentcontainer">
				<div id="blog-sidecolumn"><div id="sidebar_search" class="sidebar-block"></div><div id="sidebar_categories">
<div class="catListPostCategory">
<h3 class="catListTitle">随笔分类</h3>

<ul>

<li><a id="CatList_LinkList_0_Link_0" href="http://www.cnblogs.com/kidney/category/823584.html">Career(1)</a> </li>

<li><a id="CatList_LinkList_0_Link_1" href="http://www.cnblogs.com/kidney/category/813008.html">HTML&amp;CSS(4)</a> </li>

<li><a id="CatList_LinkList_0_Link_2" href="http://www.cnblogs.com/kidney/category/813009.html">JavaScript(7)</a> </li>

<li><a id="CatList_LinkList_0_Link_3" href="http://www.cnblogs.com/kidney/category/1091275.html">Python(1)</a> </li>

<li><a id="CatList_LinkList_0_Link_4" href="http://www.cnblogs.com/kidney/category/866365.html">View(2)</a> </li>

</ul>

</div>

</div><div id="sidebar_recentcomments" class="sidebar-block"><div id="recent_comments_wrap">
<div class="catListComment">
<h3 class="catListTitle">最新评论</h3>
	<div id="RecentCommentsBlock"><ul>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/kidney/p/6624521.html#3836837">1. Re:转行一周年</a></li>
        <li class="recent_comment_body">毕业1年就能达到这个程度，真的名牌大学和普通大学出来的人思维就是不一样，感觉自己弱爆了，我也是转行来的，仅仅是为了给家人更好的生活，佩服你这样真正有想法有梦想的人，加油！</li>
        <li class="recent_comment_author">--再见眸似霜</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/kidney/p/6624521.html#3807058">2. Re:转行一周年</a></li>
        <li class="recent_comment_body">分析的很透彻，不过话说楼主为啥赚够钱自己开公司当技术总监</li>
        <li class="recent_comment_author">--hack0072008</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/kidney/p/7627145.html#3806320">3. Re:用 Python 撸一个区块链</a></li>
        <li class="recent_comment_body">你在本地运行起来了吗？</li>
        <li class="recent_comment_author">--木土家的田童</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/kidney/p/7627145.html#3803573">4. Re:用 Python 撸一个区块链</a></li>
        <li class="recent_comment_body">相当有用</li>
        <li class="recent_comment_author">--夜里码码</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/kidney/p/6296304.html#3795977">5. Re:Vue.js自定义指令的用法与实例</a></li>
        <li class="recent_comment_body">不错。支持下楼主<br><a href="" target="_blank"></a></li>
        <li class="recent_comment_author">--仁慈的父</li>
</ul>
</div>
</div>
</div></div></div><script type="text/javascript">loadBlogSideColumn();</script>
			</div>
			
		</div><!--end: sideBarMain -->
	</div><!--end: sideBar 侧边栏容器 -->
	<div class="clear"></div>
	</div><!--end: main -->
	<div class="clear"></div>
	<div id="footer">
		
<!--done-->
Copyright ©2017 kidney
	</div><!--end: footer -->
</div><!--end: home 自定义的最大容器 -->


</body></html>